/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*  START  */
h1 {
    font-size: 24px;
    font-weight: bold;
    padding: 10px 0;
    margin:20px 0;
}

.demo-div {
    background-color: aqua;
    /* width: 100%; */
    overflow: auto;
    padding: 30px;
    margin: 30px;
}
.margin-test {
    font-size: 16px;
}
.margin-test-sub {
    margin-top: 20px;
}

/* p {
    background-color: greenyellow;
} */

/* id选择器*/
#div1 {
    background-color: grey;
}
.cls-sec {
    color: red;
}

/* 后代选择器 */
.div-parent2 .descen {
    color: green;
}
/* 子元素选择器 */
.div-parent2>.descen {
    color: blue;
}

/* 类选择器 */
.div-parent2  .intersection1.intersection2 {
    color: pink;
}

.div-parent2 .uni1,.uni2 {
    color: yellow;
}

.div-parent2 .uni1~div {
    background-color: thistle;
}

/* 序选择器 */
.div-parent3 div:first-child {
    color: red;
}
.div-parent3 div:last-child {
    color: green;
}
.div-parent3 div:nth-child(3) {
    color: yellow;
}
.div-parent3 div:nth-last-child(2) {
    color: blue;
}

.div-parent3 :first-of-type {  
    /* xx-of-type 与 nth-child的区别是 
        nth-child 取得是子元素在父级的位置
        xx-of-type 取的是先区分类型，在确定位置
    */
    color: pink!important;
}

/* 序选择器 part2 */
.div-parent4 div {
    margin: 10px;
}
.div-parent4 div:nth-child(odd) {
    border-right: 3px solid blue;
}
/* .div-parent4  :nth-of-type(odd) {
    border-right: 3px solid blue;
}  */

/* .div-parent4 div:nth-child(even) {
    border-right: 4px solid red;
} */

/* css 解析的数据方向是从右到左 */
/* .div-parent4 > div:nth-of-type(odd) { 
    border-bottom: 2px solid green;
} */

/* 
.div-parent4 > div:nth-of-type(2n+1) { 
    border-bottom: 2px solid green;
} 
*/

.div-parent5 div[id] {
    color: red;
}

.div-parent5 div[data-self^=se] {
    color: blue;
}

/* part6 字体*/
.div-parent6 {
    font-size: 24px;
    padding: 20px;
    line-height: 2;
}
.div-parent6 p:nth-child(1) {
    font-family: Consolas, "Microsoft Yahei", serif;
}
.div-parent6 p:nth-child(2) {
    font-family: Georgia, serif;
}
.div-parent6 p:nth-child(3) {
    font-family: Consolas, serif;
    font-size: 12px;
    font-style: italic;
    text-decoration: underline;
}
.div-parent6 p:nth-child(4) {
    font-family: Consolas, serif;
    font-size: 12px;
    font-weight: bold;
}
.div-parent6 p:nth-child(5) {
    font: initial bold 14px  Consolas, serif;
}

@font-face
{
    font-family: myFont;
    src: url('./assets/bwsnt.ttf');
} 
.div-parent6 p:nth-child(6) {
    font-family: myFont;
}



/* part6 常见属性 */
.div-parent7 {
    /* overflow: hidden; */
    /* height: 500px; */
}
.div-parent7 > div:nth-child(1) {
    color: violet;
    /* color: rgb(100, 0, 0);
    color: rgba(0, 200, 0, .3);
    color: #4ee;
    color: #efefef; */
}

.div-parent7 > div:nth-child(2) {
    background-color: royalblue;

}
.div-parent7 > div:nth-child(3) {
    width: 500px;
    height: 300px;
    border: 1px solid brown;
    background-image: url(http://img.jrzj.com/uploadfile/2017/0821/20170821091521507.png);
    background-repeat: no-repeat;
    /* background-position: center center; */
    /* background-size: 20px 20px; */
    background-size: contain; 
    /* background-attachment: fixed; fixed是相对整个网页进行定位 */
    overflow: scroll;
    /* 雪碧图的定位 */
    background-position: -100px -100px;
}
/* 
body {
    background-image: url(http://5b0988e595225.cdn.sohucs.com/images/20171229/5cb8aa07b5ae4222801a398f2a9b9972.jpeg);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: cover;
    background-color: #eee;
} 
*/

.div-parent7 > div:nth-child(4) {
    text-align: center;
}

.div-parent7 > div:nth-child(5) {
    width: 100px;
    height: 100px;
    border: 2px dashed greenyellow;
    text-indent: 20px;
}


.div-parent7 > div:nth-child(6) {
    width: 500px;
    height: 300px;
    border: 1px solid #111;
    font-size: 0px;
}
.div-parent7 > div:nth-child(6) div {
    font-size: 20px;
    color: black;
}
.div-parent7 > div:nth-child(6) .children1{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 5px solid red;
    padding: 0px;
    margin: 10px;
    vertical-align: top;
}
.div-parent7 > div:nth-child(6) .children2{
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 5px solid blue;
    margin: 20px;
    padding: 30px;
}

.div-parent7 > div:nth-child(7) {
    width: 200px;
    height: 200px;
    border: 1px solid blueviolet;
    overflow: auto;
}
.div-parent7 > div:nth-child(7) .inner{
    width: 200px;
    height: 200px;
    background-color: chartreuse;
    padding: 10px;
    box-sizing: border-box;
    border: 10px solid burlywood;
}


/* DIV 8 补充*/
.div-parent8 {
    color: blue;
}
.div-parent8 .div-8-1-1 {
    color: red!important;
}

.div-parent8 .div-8-1 .div-8-1-1 {
    color: green;
}

.div-8-2 .t-display-none {
    display: none;
}
.div-8-2 .t-visibility-hidden {
    visibility: hidden;
}
.div-8-2 .t-line-height {
    border: 1px solid black;
    font-size: 20px;
    line-height: 1;
    /* line-height: 50px; */
}


/* DIV 9 布局 */
.div-parent9 {
    padding: 30px 0;
}

.div-nowrap {
    white-space: nowrap;
    border: 1px solid pink;
    overflow: auto;
    overflow-y: hidden;
}

.div-parent9 .div-9-1 {
    border: 1px solid green;
}

.div-9-5,.div-9-6,.div-9-7 {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: tan;
}

.div-parent9 .t-relative-parent {
    height: 300px;
    background: teal;
}

.div-parent9 .t-relative-parent .t-relative {
    width: 200px;
    height: 200px;
    background-color: violet;
    position: relative;
    top: -10px;
    left: 30px;
}

/* position: absolute; */
.div-parent9 .t-absolute-parent {
    height: 300px;
    background-color: darkblue;
    position: relative;
}
.div-parent9 .t-absolute-parent .t-absolute {
    position: absolute;
    top: 40px;
    left: 40px;
    bottom: 40px;
    height: 100px;
    background-color: yellow;
}

/* z-index */
.div-parent9 .t-z-index-parent {
    position: relative;
    height: 300px;
    background-color: wheat;
}

.div-parent9 .t-z-index-parent .div-1 {
    position: absolute;
    left: 30px;
    right: 30px;
    width: 100px;
    height: 100px;
    background: yellowgreen;
    z-index: 2;
}

.div-parent9 .t-z-index-parent .div-2 {
    position: absolute;
    left: 30px;
    right: 30px;
    width: 120px;
    height: 120px;
    background: blue;
}


/* 固定定位 fix*/
.t-fix-position {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: url('./bg.jpg'); */
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .15;
    z-index: -100;
    background-color: #fff;
}



/* 
box-shadow: offset-x offset-y blur spread color inset;
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式]; 
*/
.test-box-shadow {
    width: 100px; height: 100px;
    border: 12px solid blue; background-color: orange;
    border-top-left-radius: 60px 90px;
    border-bottom-right-radius: 60px 90px;
    /* box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
            12px 12px 0px 8px rgba(0,0,0,0.4) inset; */
    box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4);
}


